<template>
	<div class="header-nav">
		<div class="wrapper">
			<span class="menu" v-on:click="showHide"><img src="../assets/icon-list.png"></span>
			<div class="nav-list">
				<p><router-link to="/layout/own">我的</router-link></p>
				<p><router-link to="/layout/musLib">乐库</router-link></p>
				<p><router-link to="/layout/found">发现</router-link></p>
			</div>
			<span class="search"><router-link to="/search"><img src="../assets/icon-seach.png"></router-link></span>
		</div>
		<div class="hidden" v-on:click="showHide" v-show="show"></div>
		<transition name="fade">
         	<div v-show="show" class="message-show">
         		<Message />
         	</div>
        </transition>
        
	</div>
</template>
<script>
import Message from './message'
	export default{
		name:"index",
		data(){
			return{
				show:false
			}
		},
		methods:{
            showHide(){
            	this.show=!this.show;
            }
		},
		components:{
			 Message 
		}
	}
</script>

<style scoped lang="less">
.hidden{
	width:54 / 100rem;
	height: 1334 / 100rem;
	background-color:transparent;
	position:fixed;
	right:0;
	top:0;
}

.header-nav{
	width: 100%;
	height: 88/100rem;
	overflow: hidden;
	position: fixed;
	background: url('../assets/daohang.png');
	background-size: 100%;
	top: 0;
	left: 0;
	z-index:99;
}
.wrapper{
	width: 710/100rem;
	height: 88/100rem;
	margin:0 auto;
}
.header-nav span{
	display: block;
	height: 100%;
	line-height: 88/100rem;
	text-align: center;
}
.header-nav .menu{
	position: absolute;
	left: 15/100rem;
	top:0	
}
.header-nav .menu img{
	width: 45/100rem;
	height: 37/100rem;
	margin-top: 25.5/100rem;
}
.header-nav .search{
	position: absolute;
	right: 15/100rem;
	top:0
}
.header-nav .search img{
	width: 45/100rem;
	height: 45/100rem;
	margin-top: 21.5/100rem;	
}
.header-nav span a{
	font-size: 36/100rem;
	color: #fff;
}
.nav-list{
	float: left;
	width: 550/100rem;
	display: flex;
	margin-left: 80/100rem;
}
.nav-list p{
	flex:1;
	text-align: center;
	line-height: 88/100rem;
}
.nav-list p a{
	font-size: 36/100rem;
	color: #fff;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
  opacity: 0
}
.message-show{
	height:100%;
	position:reletive;
	z-index:1000;
}
</style>